<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <div id="app" style="transform: scale(1, 1)">
            <div class="box">
                <!-- <div class="position-box-1">1</div>
                <div class="position-box-2">2</div>
                <div class="position-box-3">3</div> -->
                <div class="img-box">
                    <img src="./2023.png" alt="" draggable="false" />
                </div>
            </div>
        </div>
        <script>
            let resizeTimer = null;
            let scaleX = window.innerWidth / 1440;
            let scaleY = window.innerHeight / 900;
            $('#app').css('transform', `scale(${scaleX},${scaleY})`);
            window.onresize = function (e) {
                if (resizeTimer) clearTimeout(resizeTimer);
                resizeTimer = setTimeout(() => {
                    let scaleX = e.target.innerWidth / 1440;
                    let scaleY = e.target.innerHeight / 900;
                    $('#app').css('transform', `scale(${scaleX},${scaleY})`);
                    resizeTimer = null;
                }, 500);
            };
        </script>
        <script>
            function random(x, y) {
                return Math.random() * (x - y) + y;
            }
            let timer = setInterval(() => {
                const snow = document.createElement('div');
                let t = 0;
                let speed = random(3, 5);
                let l = random(0, window.innerWidth + 100);
                snow.style.setProperty('--size', `${random(5, 20)}px`);
                snow.style.setProperty('--top', `${t}px`);
                snow.style.setProperty('--left', `${l}px`);
                snow.classList.add('snow');
                let timer1 = setInterval(() => {
                    if (t > window.innerHeight || l < 0) {
                        snow.remove();
                        // clearInterval(timer);
                        clearInterval(timer1);
                    }
                    snow.style.setProperty('--top', `${t}px`);
                    snow.style.setProperty('--left', `${l}px`);
                    l += -0.5;
                    t += speed;
                }, 1000 / 60);
                document.body.append(snow);
            }, 1000 / 30);
        </script>
    </body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #app {
            width: 1440px;
            height: 900px;
            background-color: pink;
            transform-origin: 0px 0px;
        }
        body {
            overflow: hidden;
        }
        html,
        body,
        .box {
            width: 100%;
            height: 100%;
        }
        .box {
            position: relative;
        }
        .img-box {
            width: 100%;
            height: 100%;
        }
        .img-box img {
            width: 100%;
            height: 100%;
        }
        .snow {
            position: absolute;
            width: var(--size);
            height: var(--size);
            top: var(--top);
            left: var(--left);
            border-radius: 50%;
            opacity: 0.7;
            background-color: #bfc8d6;
            filter: blur(calc(var(--size) / 5));
            user-select: none;
            pointer-events: none;
        }
    </style>
</html>
